<template>
  <div class="box">
    <div class="header" style="background:white">
        <span class="iconfont icon-arrow-right" @click="$router.go(-1)"></span>
      <van-search
        v-model="keyword"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @input="onInput"
        shape="round"
      >
  <template #action>
    <div @click="onSearch">搜索</div>
  </template>
</van-search>
    </div>
    <div class="content">
      <div class="search">
            <div class="recent">
                <div class="rec">
                    <span>最近搜索</span>
                    <span class="iconfont icon-lajitong" @click="del"></span>
                </div>
                <div class="history">
                    <span v-for="(item, index) in searchHistory" :key="index" @click="clickHistory(item)">{{item}}</span>
                </div>
            </div>

          <hr>

          <div class="hot">
              <div class="top">
                  <span>热门搜索</span>
                  <span @click="flag=!flag" v-if="flag">隐藏</span>
                  <span @click="flag=!flag" v-else>显示</span>
              </div>
              <div v-if="flag" class="bottom" v-for="(item, index) in hotword" :key="index" >
                  <span @click="clickHot(item)">{{item}}</span>
              </div>
              <div class="hidden" v-else></div>
          </div>


      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { Toast, Search } from 'vant'
import { hotword } from '../../api/search'

Vue.use(Toast)
Vue.use(Search)
export default {
  data () {
    return {

      flag: true,  // 显示 隐藏 热门搜索
      searchHistory: [],  // 搜索历史记录存储数组
      keyword: '',   //搜索关键词
      hotword: []    // 热门搜索
    }
  },
  mounted () {
      
      // localstroage 的 search 字段 为空
      if(localStorage.getItem('search') == ''){
        localStorage.removeItem('search')
      }
      
      //  localstroage 的 search 不存在
      if (localStorage.getItem('search') == null) {

      } else {
        this.searchHistory = JSON.parse(localStorage.getItem('search'))
        this.searchHistory = this.searchHistory.reverse()  //数组翻转
      }

      hotword().then(res => {
          console.log(res.data.data);
          res.data.data.forEach((item, index) => {

            if(item.keyword === undefined){
              item.keyword = ''
            }
              if(item.keyword === ''){
                res.data.data.splice(index,1)
                console.log(item.keyword);
              } else {
                this.hotword.push(item.keyword)
              }
              
          })
      })     

  },
  methods: {

    clickHistory (item) {
       this.$router.push({ name: 'searchResult', params: { keyword: item }})
    },
    clickHot (item) {
       this.$router.push({ name: 'searchResult', params: { keyword: item }})
    },
    
    // 每输入获取 input 值
    onInput (val) {
      this.keyword = val
    },
    //  点击搜索 获取到搜索的关键字
    onSearch () {
        if(this.keyword === ''){
          Toast('请输入搜索内容')
          return false
        }
        // 搜索关键字
        console.log(this.keyword);
        this.$router.push({ name: 'searchResult', params: { keyword: this.keyword }})
    },
    //  删除历史记录
    del () {
        localStorage.removeItem('search')
        this.searchHistory = JSON.parse(localStorage.getItem('search'))
    },
  
  }
}
</script>
<style lang="stylus" scoped>
.header
  display flex
  span
    &:before
      height 100%
      display flex
      align-items center
      margin-left 10px
.van-search
  padding 5px 12px
  width 360px
.van-search__action
  color white
  background red
  border-radius 5px
  margin-left 10px
.hot
  box-sizing border-box
  padding 15px
.hot .top
  font-size 16px
  display flex
  justify-content space-between
.recent
  box-sizing border-box
  padding 10px
  font-size 16px
.recent .rec span:nth-child(2)
  float right
.icon-lajitong
  &:before
    font-size 18px

.recent .rec p 
  margin-top 10px
  height 50px
  background pink
.recent .history
  margin-top 10px
.recent .history>span 
  display inline-block
  margin-left 10px
  margin-right 10px
  // width 17%
  height 20px
  text-align center
  margin-top 10px
  color #686868
  background #f0f2f5
  line-height 20px
  border-radius 10px
  padding 2px 10px
    
.hot .bottom
  font-size 16px
  display inline-block
  width 17%
  height 20px
  text-align center
  margin-top 10px
  margin-right 10px
  color gray
  color #686868
  background #f0f2f5
  border-radius 10px
  line-height 20px
  padding 2px 0
.hidden
  background white
</style>
